<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app1">

    <p v-for="item in items">{{item.msg}}</p>

    <hr>

    <p v-for="(value, key) in object">{{key}} : {{value}}</p>

    <hr>

    <p v-for="num of evenNumbers">{{num}}</p>

    <hr>

    <p v-for="num of odd(numbers)">{{num}}</p>


    <button @click="add1">add1</button>
    <button @click="add2">add2</button>
</div>



<script>

    var app1 = new Vue({
        el: "#app1",
        data: {
            items: [
                {msg: 1},
                {msg: 2},
                {msg: 3},
                {msg: 4},
                {msg: 5},
                {msg: 6},
                {msg: 7}
            ],
            object: {
                name: "boy",
                age: 12
            },
            numbers: [1,2,3,4,5,5,6,7,8]
        },
        methods: {
            add1: function () {
                this.$set(this.object, "address", "打打是的");
            },
            add2: function () {
                this.object = Object.assign({}, this.object, {asd:123, sda:231});
            },
            odd: function (numbers) {
                return numbers.filter(function (t) { return t % 2 === 1 })
            }
        },
        computed: {
            evenNumbers: function () {
                return this.numbers.filter(function (t) { return t % 2 === 0 })
            }
        }
    })


</script>


</body>
</html>